html, body {
  margin: 0 0;
  padding: 0 0;
  text-align: center;
  font-size: 0;
  height: 100%;
  width: 100%;

}
#gradient-rotate {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;

}
#trianglify-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;

}
#color-stop-1 {
  -webkit-animation: change-color-1 12s ease-in-out infinite alternate;
  animation: change-color-1 12s ease-in-out infinite alternate
}

#color-stop-2 {
  -webkit-animation: change-color-2 12s ease-in-out infinite alternate;
  animation: change-color-2 12s ease-in-out infinite alternate
}

#color-stop-3 {
  -webkit-animation: change-color-3 12s ease-in-out infinite alternate;
  animation: change-color-3 12s ease-in-out infinite alternate
}
@keyframes change-color-1 {
  0% {
	stop-color: #22C8F6
  }

  25% {
	stop-color: #ff0
  }

  50% {
	stop-color: #00ffcb
  }

  75% {
	stop-color: #70ff00
  }
}
@keyframes change-color-2 {
  0% {
	stop-color: #20C498
  }

  25% {
	stop-color: #ff00ad
  }

  350% {
	stop-color: #d480ff
  }

  75% {
	stop-color: #ff9200
  }
}
@keyframes change-color-3 {
  0% {
	stop-color: #189932
  }

  25% {
	stop-color: #c300cb
  }

  50% {
	stop-color: #5600d4
  }

  75% {
	stop-color: #ff46dc
  }
}
nav{
    height: 84px;
    width: 100%;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    top: 0;
    z-index:1000;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 1200px;
	}
	nav .daohangtu{
	width: 1200px;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;px;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	}
	nav .daohangzi a{
		font-size: 25px;
    font-family:幼圆;
    text-decoration: none;
    color: #fff;
    margin-left: 48px;
    padding: 5px;
    display: inline-block;
	}
	nav .daohangtu .logo
	{
		height: 33px;
	}
	
	.center{
     width: 13.3vw;
     mix-blend-mode: overlay;
     left: 0;
     right: 0;
     margin: 0 auto;
     top: 50%;
     -webkit-transform: translate3d(0,-36.5%,0);
     transform: translate3d(0,-36.5%,0);
     z-index: 4;
     position: absolute;
     transition: 2.5s;

	}
	.center .zhu{
	display: block;
    width: 13vw;
    height: auto;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
	}
	.center .zi{
	display: block;
    margin-top: 1 vw;
    width: 13vw;
    height: auto;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    opacity: 1;
	}
	.daohangzi a:hover{
		-webkit-animation:  move 2s 1 forwards ;
	}
@-webkit-keyframes move{
	0%{
		
			transform: translate3d(0px,0px,0px);
			color:white;
			
		
	}
	50%{
		
			transform: translate3d(0px,10px,0px);
		    color:black;
		   
	}
	100%{
		transform: translate3d(0px,0px,0px);
			color:white;
	}
}
.center:hover{
	transform: scale(1.3) translateY(-80px);
	opacity: 1;

}
.zizi{
	margin-top: .99vw;
    font-family: 幼圆;
    opacity:0.9;
    color: #fff;
    font-size: 1.5vw;
    text-align: center;
    line-height: 1.25vw;
}
nav{
    height: 84px;
    width: 100%;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    top: 0;
    z-index:1000;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 1200px;
	}
	nav .daohangtu{
	width: 1200px;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;px;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	}
	nav .daohangzi a{
		font-size: 25px;
    font-family:幼圆;
    text-decoration: none;
    color: #fff;
    margin-left: 48px;
    padding: 5px;
    display: inline-block;
	}
	nav .daohangtu .logo
	{
		height: 33px;
	}
	
	.center{
     width: 13.3vw;
     mix-blend-mode: overlay;
     left: 0;
     right: 0;
     margin: 0 auto;
     top: 50%;
     -webkit-transform: translate3d(0,-36.5%,0);
     transform: translate3d(0,-36.5%,0);
     z-index: 4;
     position: absolute;
     transition: 2.5s;

	}
	.center .zhu{
	display: block;
    width: 13vw;
    height: auto;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
	}
	.center .zi{
	display: block;
    margin-top: 1 vw;
    width: 13vw;
    height: auto;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    opacity: 1;
	}
	.daohangzi a:hover{
		-webkit-animation:  move 2s 1 forwards ;
	}
@-webkit-keyframes move{
	0%{
		
			transform: translate3d(0px,0px,0px);
			color:white;
			
		
	}
	50%{
		
			transform: translate3d(0px,10px,0px);
		    color:black;
		   
	}
	100%{
		transform: translate3d(0px,0px,0px);
			color:white;
	}
}
.center:hover{
	transform: scale(1.3) translateY(-80px);
	opacity: 1;

}
.zizi{
	margin-top: .99vw;
    font-family: 幼圆;
    opacity:0.9;
    color: #fff;
    font-size: 1.5vw;
    text-align: center;
    line-height: 1.25vw;
}